<template>
  <div class="content">
    <div class="friend-wrapper">
      <!-- 搜索框 -->
      <div class="wrapper">
        <div class="search-wrapper">
          <input
            type="text"
            class="searchInput"
            v-model="search"
            @keydown="searchList"
            @keyup="change"
            placeholder="搜索"
          />
        </div>
        <div class="add_Plus" style="cursor: pointer" @click="createGroup"></div>
        <el-dialog title="创建群聊" :visible.sync="showAddmembers" width="300px">
          <div>
            <div style="display: flex; flex-direction: column">
              <el-input style="margin: 0 20px 20px 0" v-model="groupName" placeholder="请输入群名称"></el-input>
              <el-input v-model="description" placeholder="请输入群描述"></el-input>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancle">取 消</el-button>
            <el-button type="primary" @click="shure">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <friendlist v-show="sousuo" @open="drawer = true"></friendlist>

      <!-- 搜索联系人列表 -->
      <div class="friendlist" v-show="sousuoList">
        <el-row class="tac">
          <el-col>
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo frienditem"
              background-color="#ffffff"
              text-color="#333"
              active-text-color="rgb(66,153,248)"
            >
              <el-menu-item
                :index="`${m}`"
                v-for="(item, m) in searchPeople"
                :key="m"
                @click="selectFriend(item)"
              >
                <img class="avatar" width="36" height="36" :src="item.avatar" />
                {{item.realName}}
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-drawer :visible.sync="drawer" v-model="direction" size="100%" v-if="showInPc">
      <div class="friendinfo">
        <info></info>
      </div>
    </el-drawer>
    <div class="friendinfo" v-else>
      <info></info>
    </div>
  </div>
</template>

<script>
import search from "../../components/search/search";
import friendlist from "../../components/friendlist/friendlist";
import info from "../../components/info/info";
import { mapState, mapActions, mapGetters } from "vuex";
import axios from "axios";
export default {
  components: {
    search,
    friendlist,
    info
  },
  data() {
    return {
      drawer: false,
      direction: "ltr",
      showInPc: true,
      showAddmembers: false,
      search: "",
      active: false,
      groupName: "",
      description: "",
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf"
      },
      searchPeople: [],
      sousuo: true,
      sousuoList: false
    };
  },
  methods: {
    change() {
      this.sousuo = true;
      this.sousuoList = false;
      this.$store.dispatch("search", this.search);
    },
    searchList(e) {
      var params = new FormData();
      params.append("name", this.search);
      params.append("memberId", this.$store.state.user.memberId);
      if (e.keyCode == 13) {
        axios
          .post(
            "http://im.wzhwgg.com:8070/wechatwebsite/index/getmembers.do",
            params
          )
          .then(res => {
            console.log(res.data.object);
            if (res.data.object.length <= 0) {
              this.sousuo = true;
              this.sousuoList = false;
            } else {
              this.sousuo = false;
              this.sousuoList = true;
              this.searchPeople = res.data.object;
            }
          });
      }
    },
    del() {
      this.search = "";
      this.change();
    },
    createGroup() {
      this.showAddmembers = true;
    },
    async shure() {
      let that = this;
      let params = new FormData();
      params.append("memberId", this.user.memberId);
      params.append("groupName", this.groupName);
      params.append("description ", this.description);

      const { data: object } = await this.$http.post(
        `/api/group/add.do`,
        params
      );
      // this.$http.post(`/api/group/add.do?memberId=${this.user.memberId}&groupName=${this.groupName}&description=${this.description}`, params)
      this.fetchGroupChatlist();
      this.showAddmembers = false;
    },

    async fetchGroupChatlist() {
      const { data } = await this.$http.get(
        `/api/groupMessage/getGroupByUserId.do?memberId=${this.user.memberId}`
      );
      this.$store.dispatch("groupList", data.object);
    },
    cancle() {
      this.showAddmembers = false;
    },
    getFriend() {
      var params = new FormData();
      // http://im.wzhwgg.com:8070/wechatwebsite/api/relation/selectRelationshipbydepartmentId.do?memberId=&departmentcode=
      params.append("memberId", this.$store.state.user.memberId);
      this.$http.post("/index/getInitList.do", params).then(({ data }) => {
        console.log(data);

        let sortArr = this.sortFriend(data.object);
        this.$store.commit("getFriendList", sortArr);
        sortArr.some(item => {
          if (item.name == "吴中城管") {
            this.ts = item.departmentVOList;
            item.departmentVOList.some(res => {
              if (res.name == "外借人员") {
                this.wj = res.members;
              }
            });
          }
        });
      });
    },
    selectFriend(data) {
      this.$store.commit("selectFriend", data);
      this.$emit("open");
    },
    sortFriend(arr) {
      arr.sort(this.sortBysort);
      arr.forEach(item => {
        if (item.departmentVOList && item.departmentVOList.length > 0) {
          item.departmentVOList = item.departmentVOList.sort(this.sortBysort);
          item.departmentVOList.forEach(res => {
            if (res.members && res.members.length > 0) {
              res.members = res.members.sort(this.sortBysort);
            }
          });
        }
      });

      return arr;
    },
    sortBysort(a, b) {
      return a.sort - b.sort;
    }
  },
  created() {
    this.showInPc = document.body.clientWidth < 420;
    this.getFriend();
  },
  computed: {
    ...mapState(["selectId", "searchText", "user", "searchText"]),
    ...mapGetters(["searchedFriendlist"]),
    noText() {
      if (this.search === "") return true;
      return false;
    },
    haveText() {
      if (this.search === "") return false;
      return true;
    }
  }
};
</script>

<style lang="stylus" scoped>
.content {
  height: 100%;
  display: flex;

  .friend-wrapper {
    height: 100%;
    width: 250px;
    display: flex;
    flex-direction: column;
    background: rgb(230, 230, 230);
  }

  .friendinfo {
    flex: 1;
  }
}
</style>
<style lang="stylus" scoped>
.wrapper {
  background-color: rgb(230,230,230);
  position: relative;
  padding: 22px 12px 12px 12px;
}

.add_Plus {
  width: 14px;
  height: 14px;
  background-image : url("../../assets/images/add2.jpg");
  background-size : 100% 100%;
  position: absolute;
  top: 28px;
  right: 12px;
}

.search-wrapper {
  position: relative;
  display: flex;
  box-sizing: border-box;
  height: 26px;
  width: 90%;
  background-color: #e5e3e2;
  border: 1px solid #d9d7d6;
  border-radius: 2px;

  .searchInput {
    flex: 1;
    font-size: 12px;
    padding: 6px;
    background-color: rgb(213,217,220);
    outline: none;

    &:focus {
      background-color: #f2efee;
    }
  }

  .icon-search {
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
  }

  .searchInput-delete {
    display: block;
    position: absolute;
    outline: none;
    top: 0;
    right: 0;
    width: 24px;
    height: 100%;
    background-image: url('../../components/search/delete.png');
    background-size: 26px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
  }
}
</style>
<style lang="stylus" scoped>
.friendlist {
  background-color: rgb(230,230,230);
  height: 100%;
  overflow-y: auto;

  .tac {
    height: 100%;

    .el-col {
      height: 100%;
    }
  }

  .frienditem {
    height: 100%;
    border-top: 1px solid #dadada;

    &:first-child, &.noborder {
      border-top: none;
    }

    .friend-info {
      display: flex;
      padding: 12px;
      transition: background-color 0.1s;
      font-size: 0;

      &:hover {
        background-color: rgb(220, 220, 220);
      }

      &.active {
        background-color: #c4c4c4;
      }

      .avatar {
        border-radius: 2px;
        margin-right: 12px;
      }

      .remark {
        font-size: 14px;
        line-height: 36px;
      }
    }
  }
}
</style>
<style>
@media screen and (max-width: 720px) {
  .el-menu {
    border-right: 0 !important;
  }
}
</style>
